import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Flex } from 'antd';
import { Link, useSearchParams } from 'react-router-dom'
import { GROUP_HAS_TARGET } from '../contants'
import { putPlayIndex, putPlayList } from '../redux/reducers'
import { fetchJobList } from '../redux/actions.js'
import { getLevelStyle, getLevelText } from '../utils'

function TargetPage(props) {
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(fetchJobList())
  }, [])
  const [ searchParams, setSearchParams ] = useSearchParams()
  const targetGroup = searchParams.get('targetGroup')
  // console.log('222222', targetGroup, searchParams)
  const dataList = useSelector(state => state.job.dataList.filter(item => {
    if(!targetGroup) {
      return item['group'] == GROUP_HAS_TARGET 
    }

    return item['group'] == GROUP_HAS_TARGET && item['targetGroup'] == targetGroup
  })).sort((a, b) => b.weight - a.weight)

  console.log('++++++222222 ', dataList)

  const renderTitle = (name, record, index)=>{
    return (
      <div>
        <Link to={`/jobList/detail/${index}`}>
          <label style={{color: 'blue'}}>
            <span>{record.brandName}</span>
            <span style={{color: 'red'}}>{record.salaryDesc}</span>
          </label>
        </Link>
        <span onClick={()=>{
          dispatch(putPlayIndex(index))
          dispatch(putPlayList(dataList))
        }}>
          <Link to={'/jobList/detailFunction/level'}>
            <label style={{background: '#1890ff', borderRadius: 4, color: '#fff', padding: '2px 4px' }}>标记等级</label>
          </Link>          
        </span>
      </div>
    )
  }

  const columns = [
    {
      title: '标题',
      dataIndex: 'jobName',
      key: 'title',
      width: 210,
      render: renderTitle
    },
    {
      title: '职位',
      dataIndex: 'jobName',
      key: 'jobName',
      width: 160,
      render:(value, record)=>{
        return <div onClick={()=>{
          window.open('https://www.zhipin.com/job_detail/'+ record.lid +'.html', '_blank')
        }} style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace:'nowrap', color: 'blue'}}>{value}</div>
      }
    },
    {
      title: '类目',
      dataIndex: 'category',
      key: 'category',
      width: 80
    },
    {
      title: '分类',
      dataIndex: 'targetGroup',
      key: 'targetGroup',
      width: 80
    },
    {
      title: '等级',
      dataIndex: 'weight',
      key: 'weight',
      width: 160,
      render: (text, record) => {
        const levelStyle = getLevelStyle(text)
        return <span style={{...levelStyle, padding: '4px 8px', borderRadius: '4px'}}>{getLevelText(text)}</span>
      }
    }
  ];




  return (
    <div>
      <div style={{ marginTop: 20 }}>
        <Table
          size="small"
          scroll={{ y:40*15}}
          columns={columns}
          dataSource={dataList}
          pagination={{ 
            pageSize: 100, 
            total: dataList.length,
            showTotal: (total, range) => { return `第${range[0]}-${range[1]}条  共${total} 条`},
            onChange: (page, pageSize) => {
              page = page
              pageSize = pageSize
            }
          }}
        />
      </div>
    </div>)

}

export default TargetPage